<!--
 * @Description: 
 * @Author: mxy
 * @Date: 2022-11-28 21:11:52
 * @LastEditors: mxy
 * @LastEditTime: 2022-11-28 21:11:53
-->
<template>
  <div>
    <h2>侦听器</h2>
    <input type="text" v-model.lazy="uname" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "mxy",
      dog: {
        gname: "旺旺",
        age: 2,
      },
    };
  },
  //当数据发生变化时，监听器调用
  // 两种写法
  watch: {
    //1、函数写法
    // uname(newVal, oldVal) {
    //   console.log(newVal, oldVal);
    // },
    //2、对象写法
    dog: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      deep: true, //深度监听，只针对于对象,对象的属性发生变化就会调用函数
      immediate: true, //立即监听，页面一打开就会调用监听函数
    },
  },
};
</script>

<style>
</style>